<template>
    <el-tabs v-model="activeName">
        <el-tab-pane name="first">
            <span slot="label"><i class="el-icon-date"></i>菜单显示管理</span>
            <el-table
                    ref="multipleTable"
                    :data="tempList"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        prop="menuId"
                        label="id"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="menuName"
                        label="标签名"
                        width="300">
                </el-table-column>
<!--                <el-table-column-->
<!--                        prop="menuUrl"-->
<!--                        label="跳转链接"-->
<!--                        width="300">-->
<!--                </el-table-column>-->
                <el-table-column
                        prop="menuBarIcon"
                        label="标签图标"
                        width="300">
                    <template slot-scope="scope">
                        <i :class="scope.row.menuBarIcon" class="iconfont"></i>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="menuSort"
                        label="排序"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="menuStatus"
                        label="是否显示"
                        show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.menuStatus"
                                active-color="#13ce66"
                                inactive-color="#f2f2f2"
                                :active-value="0"
                                :inactive-value="1"
                                @change="menu_status(scope.row)"
                                  >
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="120">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="primary" icon="el-icon-edit" circle size="small"></el-button>
                        <el-button
                                @click.native.prevent="deleteRow(scope.row.label_id, labelList)"
                                type="danger" icon="el-icon-delete" circle
                                size="small" style="background-color: #f2f2f2;border-color: #f2f2f2">
                        </el-button><!--将单选的id传到后台-->
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage1"
                        :page-size="pageNum"
                        layout="total, prev, pager, next, jumper"
                        :total="total" style="text-align: right">

                </el-pagination>
            </div>
        </el-tab-pane>
        <!--添加标签tabs-->
        <el-tab-pane label="添加菜单显示" name="second">
                    <el-form ref="form" :model="sizeForm" label-width="80px" size="medium" >
                        <el-form-item label="标签名">
                            <el-input v-model="sizeForm.menuName"></el-input>
                        </el-form-item>
                        <!--链接名-->
                        <el-form-item label="跳转链接">
                            <el-input type="textarea" v-model="sizeForm.menuUrl" class="textarea" rows="5"></el-input>
                        </el-form-item>
                        <el-form-item label="标签排序">
                            <el-input v-model="sizeForm.menuSort"></el-input>
                        </el-form-item>
                        <el-form-item label="标签样式">
                            <el-input v-model="sizeForm.menuBarIcon"></el-input>
                        </el-form-item>
                        <el-form-item label="是否显示" class="menuStatus">
                            <el-radio-group v-model="sizeForm.menuStatus" size="medium">
                                <el-radio v-model="sizeForm.menuStatus" border :label="0">是</el-radio>
                                <el-radio  v-model="sizeForm.menuStatus" border :label="1">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item size="large" class="create-button">
                            <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
                            <el-button @click="tiao">取消</el-button>
                        </el-form-item>
                    </el-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>

    import '../../../public/font/font_jcr5wjzc7r/iconfont.css'
    export default {
        name: "Menu_management",
        data(){
            return{
                labelList:[
                    {
                    }
                ],
                    sizeForm: {
                        menuName: '',
                        menuUrl: '',
                        menuSort:'',
                        iconFile:'',
                        menuStatus: '1',
                    },
                input:'',
                id:'',
                deleteIdList:[],
                activeName:'first',
                // ======================分页=========================
                currentPage1: 1,//默认在第一页
                page:'1',
                total:5,//默认总条数
                pageNum:5,//每页显示条数,
                tempList:[]
            }
        },
        methods:{
            //分页
            //分页每页几条
            handleSizeChange(val) {
                this.pageNum=val
                console.log(`每页 ${val} 条`);
            },
            //请求点击的当前页 当前页数据
            handleCurrentChange(val) {
                this.currentPage1=val
                this.currentChangePage(this.labelList,val);//获取用户点击的当前页后刷新数据
                // this.$axios.post('/api/articleList',{page:val}).then((res)=> {
                //     this.essayList=res.data
                //     console.log(res.data)
                // })
                console.log(`当前页: ${val}`);
            },
            //分页方法
            currentChangePage(list,currentPage) {
                let from = (currentPage - 1) * this.pageNum;
                let to = currentPage * this.pageNum;
                this.tempList = [];
                for (; from < to; from++) {
                    if (list[from]) {
                        this.tempList.push(list[from]);
                    }
                }
            },

            //复选框将id传入后台
            handleSelectionChange(val) {
                for (var i=0;i<val.length;i++){
                    this.deleteIdList.push(val[i].label_id)
                }
                this.multipleSelection = this.deleteIdList;
                this.deleteIdList=[]
            },
            menu_status(data){
                this.$axios.post('/api/menu/updateMenuBar',{menuId:data.menuId,menuName:data.menuName.trim(),menuUrl:data.menuUrl.trim(),menuSort:data.menuSort, menuStatus:data.menuStatus,menuBarIcon:data.menuBarIcon}).then((res)=>{
                    console.log(res)
                })
            },
            tiao(){
                this.activeName='first'
            },
            //修改方法
            handleClick(row) {
                sessionStorage.setItem('sizeForm',JSON.stringify(row))
                this.$router.push({name:'updateMenu_management'})
            },
            //删除方法
            deleteRow(label_id, rows) {
                this.id=label_id
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //发起单个删除请求传出id

                    console.log(this.id)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            select(){
                console.log(this.input)
                this.input=''
            },
                onSubmit(form) {
                    this.$axios.post('/api/menu/addMenuBar',{menuName:this.sizeForm.menuName.trim(),menuUrl:this.sizeForm.menuUrl.trim(),menuSort:this.sizeForm.menuSort, menuStatus:this.sizeForm.menuStatus,menuBarIcon:this.sizeForm.menuBarIcon}).then((res)=>{
                        console.log(res)
                    })
                }
        },
        created() {
            this.$axios.post('/api/menu/MenuBarList').then((res)=> {
                    this.labelList=res.data.data
                    //分页
                    this.total=res.data.data.length
                    this.currentChangePage(this.labelList,this.currentPage1)
                console.log(res.data.data)
            })
        }
    }
</script>

<style scoped>
    .delete{
        float: left;
    }

    .el-tabs{
        height: 560px;
    }
    .el-form{
        width: 40%;
        overflow: hidden;
        padding-top: 20px;
    }
    .el-radio-group{
        float: left;
    }

    .el-tabs{
        height: 560px;
    }
    .create-button{
        margin-top: 40px;
    }
    .textarea{
        height: 100px;
    }
    .isDisplay{
        margin-top: 40px;
    }
</style>